<ion-content class="card-background-page">
	<div class="zs-header">	
		<ion-segment [(ngModel)]="pet">
			<!-- <ion-segment-button (click)="setMajor('-');" disabled="{{!less}}">
				<ion-icon name="md-arrow-dropleft"></ion-icon>
			</ion-segment-button> -->
		
			<ion-segment-button value="全部" (click)="resetAndLoadCourses()">
				全部
			</ion-segment-button>
			<ion-segment-button value="收藏" (click)="resetAndLoadCollectCourse()">
					收藏
			</ion-segment-button>
			<ion-segment-button value="{{item.display}}" (click)="resetAndLoadCourses(item)" 
				*ngFor="let item of showMajors">
					{{item.display}}
			</ion-segment-button>

			<!-- <ion-segment-button (click)="setMajor('+');" disabled="{{!add}}">
					<ion-icon name="md-arrow-dropright"></ion-icon>
			</ion-segment-button> -->
		</ion-segment>
		<ion-input class="zs-search" [(ngModel)]="queryValue" 
			type="search"  placeholder="查询" 
			[ngModelOptions]="{standalone: true}" 
			(keyup)="onSearchKeyUp($event)"></ion-input>
	</div>

	<div style="margin-top: 90px;">
		<ion-card *ngFor="let item of coures" style="padding-left: 1px;right: -7px;width: calc(100% - 15px);margin-top:10px; ">
			<img src="{{item.imagePath}}" (click)="goCourse(item)"/>
			<div class="card-title" (click)="goCourse(item)">{{item.name | asLength:16}}</div>
	    	<div class="card-subtitle" (click)="goCourse(item)">
	    		{{item.owerName}} {{item.dataForemate}} -- 学习进度:{{item.finshedCount}}/{{item.chapterCount}}
	    	</div>
		  	<ion-card-content (click)="goCourse(item)">
		    	<p>{{item.info}}</p>
		  	</ion-card-content>

			<ion-row >
		      <ion-col>
		        <button ion-button clear small icon-start (click)="setCollect(item)">
							<ion-icon name='{{item.iconName}}'></ion-icon>
		          收藏
		        </button>
		      </ion-col>
		      <ion-col text-center>
		        <button ion-button clear small icon-start (click)="goCoursePage(item,'评论')">
		          <ion-icon name='text'></ion-icon>
		          评论({{item.commentCount}})
		        </button>
		      </ion-col>
		      <ion-col text-right>
		        <button ion-button clear small icon-start>
		          <ion-icon name='share-alt'></ion-icon>
		          分享
		        </button>
		      </ion-col>
		    </ion-row>
		</ion-card>
<!-- 无级滚动效果实现 -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
		<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
	
	</div>
	
</ion-content>
